HTML Helpers ব্যবহার (TextBox, DropDownList, RadioButton ইত্যাদি)

Web Development - এএসপি ডট (ASP.Net) - ভিউ (Views) এবং HTML Helpers |
1
1

HTML Helpers হলো ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনের মধ্যে ডাইনামিক HTML ট্যাগ তৈরির একটি সহজ উপায়। এগুলো Razor ভিউ ইঞ্জিনের মাধ্যমে ব্যবহার করা হয়, যা ডাইনামিক কন্টেন্ট সহজে জেনারেট করতে সহায়তা করে। HTML Helpers সাধারণত TextBox, DropDownList, RadioButton ইত্যাদি ইনপুট ফিল্ড তৈরির জন্য ব্যবহার করা হয়।


HTML Helpers কী?

HTML Helpers হলো C# কোড যা HTML ট্যাগ তৈরি করতে ব্যবহার করা হয়। এগুলো কোডের পুনরাবৃত্তি এড়াতে এবং অ্যাপ্লিকেশনকে আরও সংহত এবং সুসংগঠিত করতে সাহায্য করে। এগুলো Model Binding, Form Submission এবং অন্যান্য ফর্ম নিয়ন্ত্রণের জন্য সহায়ক।

এখানে কিছু সাধারণ HTML Helper এবং এগুলোর ব্যবহার দেখানো হলো।


১. TextBox (TextBoxFor)

TextBoxFor হল একটি HTML Helper যা ইনপুট ফিল্ড তৈরি করে। এটি মডেল প্রোপার্টি বা ভ্যালিডেশন এর সাথে সংযুক্ত থাকে।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Name">Product Name</label>
        @Html.TextBoxFor(model => model.Name)  <!-- TextBox তৈরি করা হচ্ছে -->
    </div>

    <div>
        <label for="Price">Price</label>
        @Html.TextBoxFor(model => model.Price)  <!-- Price জন্য TextBox -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, TextBoxFor Name এবং Price প্রপার্টির জন্য ইনপুট ফিল্ড তৈরি করছে। Model Binding এর মাধ্যমে ডাটা সেভ বা রিটার্ন করা হয়।


২. DropDownList (DropDownListFor)

DropDownListFor HTML Helper এর মাধ্যমে ড্রপডাউন লিস্ট তৈরি করা যায়। এটি মডেল প্রোপার্টি অথবা একটি SelectList (যে তালিকা থেকে ড্রপডাউন তৈরি হবে) ব্যবহার করে ডাইনামিক ড্রপডাউন তৈরি করে।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Category">Category</label>
        @Html.DropDownListFor(model => model.CategoryId, new SelectList(Model.Categories, "Id", "Name"))  
        <!-- DropDownList তৈরি করা হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, CategoryId মডেল প্রপার্টির জন্য একটি ড্রপডাউন তৈরি করা হচ্ছে, যেখানে SelectList ব্যবহার করে ক্যাটেগরির নাম এবং আইডি ডেটা মডেল থেকে ডাইনামিকভাবে আসে।


৩. RadioButton (RadioButtonFor)

RadioButtonFor HTML Helper এর মাধ্যমে একাধিক অপশনের মধ্যে একটি নির্বাচন করতে radio button তৈরি করা যায়।

উদাহরণ:

@model User

<form>
    <div>
        <label>Gender</label><br>
        @Html.RadioButtonFor(model => model.Gender, "Male")  <!-- Male রেডিও বাটন -->
        Male
        @Html.RadioButtonFor(model => model.Gender, "Female")  <!-- Female রেডিও বাটন -->
        Female
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, Gender প্রপার্টির জন্য দুটি রেডিও বাটন তৈরি করা হচ্ছে: Male এবং Female


৪. CheckBox (CheckBoxFor)

CheckBoxFor HTML Helper ব্যবহার করে আপনি চেকবক্স তৈরি করতে পারেন, যা মডেলের বুলিয়ান প্রপার্টির মান (True/False) ধারণ করবে।

উদাহরণ:

@model User

<form>
    <div>
        <label>@Html.CheckBoxFor(model => model.IsSubscribed) Subscribe to Newsletter</label>
        <!-- চেকবক্স তৈরি হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, IsSubscribed মডেল প্রপার্টির জন্য একটি চেকবক্স তৈরি হচ্ছে, যা ইউজার সিলেক্ট করলে True, নতুবা False হবে।


৫. TextArea (TextAreaFor)

TextAreaFor HTML Helper দিয়ে আপনি বড় ধরনের টেক্সট ইনপুট ফিল্ড তৈরি করতে পারেন, যেমন ইউজার কমেন্ট বা বিবরণ ইনপুট করার জন্য।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Description">Description</label>
        @Html.TextAreaFor(model => model.Description)  <!-- TextArea তৈরি করা হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, Description প্রপার্টির জন্য একটি টেক্সটএরিয়া তৈরি হচ্ছে, যেখানে ইউজার বেশি তথ্য লিখতে পারবে।


৬. Button (Button)

Button HTML Helper ব্যবহার করে একটি সাবমিট বা সাধারণ বাটন তৈরি করা যেতে পারে।

উদাহরণ:

@Html.SubmitButton("Save")  <!-- Submit button তৈরি করা -->

এটি একটি সাধারণ সাবমিট বাটন তৈরি করবে।


HTML Helpers এর সুবিধা

  1. ডাইনামিক HTML তৈরি: HTML Helpers ডাইনামিকভাবে HTML উপাদান তৈরি করে, যা কোডের পুনরাবৃত্তি কমায়।
  2. Model Binding: Helpers মডেল বাইন্ডিংয়ের মাধ্যমে ফর্ম ডেটা গ্রহণ করে, যা ফর্ম সাবমিট করা সহজ করে।
  3. ভাল কোড অর্গানাইজেশন: HTML Helpers কোডকে সুসংগঠিত রাখতে সাহায্য করে এবং মানসম্পন্ন কোডিং প্রাকটিস অনুসরণ করতে সহায়ক।
  4. ভ্যালিডেশন: HTML Helpers সাধারণত ASP.Net MVC বা ASP.Net Core ফ্রেমওয়ার্কের ভ্যালিডেশন সিস্টেমের সাথে একীভূত হয়ে কাজ করে, যার ফলে ডেটা ইনপুটের সময় ভুল প্রবেশের ঝুঁকি কমে যায়।

সারাংশ

HTML Helpers হল ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনগুলিতে ডাইনামিক HTML তৈরির জন্য একটি গুরুত্বপূর্ণ টুল। এগুলি মডেল ডেটার সাথে কাজ করে এবং বিভিন্ন ইনপুট ফিল্ড যেমন TextBox, DropDownList, RadioButton এবং CheckBox সহজে তৈরি করতে সহায়তা করে। Model Binding এবং Form Submission এর মাধ্যমে ডেটা কার্যকরভাবে প্রক্রিয়া করা যায়।

Content added By
Promotion